<template>
  <p style="color: white;letter-spacing: 0.2em;">新闻通知中心</p>
<div class="news">
  <news-card v-for="item in newsList" :item="item"></news-card>
</div>
</template>

<script>
import newsCard from '../../components/NewsCard.vue'
import {getIndexInfo} from "../../api/api";
import {ElMessage} from "element-plus";

export default {
  name: "Index",
  mounted() {
    this.getNews() //挂载前通过id获取新闻和通知
  },
  components:{ newsCard },
  data(){
    return{
      list:[],
      newsList:[
        {
          id: 0,
          title: '近日新闻',
          lists:[

          ],
        },
        {
          id: 1,
          title: '医院通知',
          lists: [

          ],
        },
      ],
    }
  },
  methods:{
    getNews(){
      getIndexInfo({},{})
      .then(res=>{
        //console.log(res)
        if (res.code===200){
          ElMessage.success({
            type: 'success',
            message: res.msg
          })
          this.list = res.data
          this.list.forEach(value => {
            if (value.type === 0){
              this.newsList[0].lists.push(value)
            }else {
              this.newsList[1].lists.push(value)
            }
          })
        }
        else{
          ElMessage.warning({
            type: 'warning',
            message: res.msg
          })
        }
      })
      .catch(err=>{
        console.log(err)
        ElMessage.error({
          type: 'error',
          message: err
        })
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
}
</script>

<style scoped>
.news{
  position: relative;
  width: 100%;
  height: 600px;
  background: rgba(255,255,255,.3);
  z-index: 1;
  border-radius: 30px;
  box-shadow: 5px 10px 5px #2b303b;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
}
.news:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2;
  background:url('../../assets/background.jpg') 0 / cover fixed;
  filter: blur(10px);
}
</style>